<div class="commits">
    <table class="ui fixed celled table">
        <thead>
        <tr>
            <th class="three wide">{{ 'commit_author' | translate }}</th>
            <th class="three wide">{{ 'commit_id' | translate }}</th>
            <th class="seven wide">{{ 'commit_message' | translate }}</th>
            <th class="three wide">{{ 'commit_date' | translate }}</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let c of getDataForCurrentPage()">
            <td valign="middle" class="middle">
                <div class="vcenter">
                    <img *ngIf="c.author.avatar" [src]="c.author.avatar">
                    <div class="author">
                        {{ c.author.displayName }}
                    </div>
                </div>
            </td>
            <td class="middle">
                <a [href]="c.url" target="_blank">{{ c.id | cut : 7 }}</a>
            </td>
            <td class="middle">
                <pre [innerHTML]="c.message"></pre>
            </td>
            <td class="middle">
                {{ c.authorTimestamp | amTimeAgo }}
            </td>
        </tr>
        </tbody>
        <tfoot *ngIf="getNbOfPages() > 1">
        <tr>
            <th colspan="4">
                <div class="ui right floated pagination menu" >
                    <a class="icon item" (click)="downPage()">
                        <i class="left chevron icon"></i>
                    </a>
                    <a class="item" *ngFor="let page of getNbOfPages() | ngForNumber" (click)="goTopage(page)" [class.active]="currentPage === page">{{page}}</a>
                    <a class="icon item" (click)="upPage()">
                        <i class="right chevron icon"></i>
                    </a>
                </div>
            </th>
        </tr>
        </tfoot>
    </table>
</div>
